<template>
  <view class="container" v-if="order">
	  <!-- 顶部导航栏 -->
	  <uni-nav-bar
	    @clickLeft="goBack"
	    left-icon="back"
	    leftIcon="arrowleft"
	    title="商品详情"
	    statusBar="true"
	    fixed="true"
	    color="#000000"
	    backgroundColor="#ffffff"
	  ></uni-nav-bar>
	  
    <!-- 订单状态 -->
    <view class="order-status">
      <text class="status-text">已完成</text>
    </view>

    <!-- 商家信息 -->
    <view class="store-info">
      <text class="store-name">购买信息</text>
      <text class="arrow">></text>
    </view>

    <!-- 商品列表 -->
    <view class="goods-list" >
      <view class="goods-item" v-for="(item, index) in order.orderDetailsList" :key="index">
        <image class="goods-img" :src="item.image" mode="aspectFill"></image>
        <view class="goods-info">
          <view class="goods-name">{{ item.product.name }}</view>
          <view class="goods-desc">{{ item.product.description }}</view>
          <view class="goods-price-wrap">
            <text class="price">¥{{ item.product.price }}</text>
            <text class="count">x{{ item.number }}</text>
          </view>
        </view>
        <!-- <button class="add-cart">加购物车</button> -->
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="price-info" >
      <view class="price-item">
        <text>商品金额</text>
        <text class="amount">¥{{order.amount}}</text>
      </view>
      <view class="price-item total">
        <text>实付</text>
        <text class="amount highlight">¥{{order.amount}}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info" >
      <view class="info-title">订单信息</view>
      <view class="info-item">
        <text class="label">收货信息</text>
        <text class="value">{{order.consignee}}，{{order.phone}}，{{order.address}}</text>
      </view>
      <view class="info-item">
        <text class="label">订单编号</text>
        <view class="value-wrap">
          <text class="value">{{order.number}}</text>
          <text class="copy-btn">复制</text>
        </view>
      </view>
      <view class="info-item">
        <text class="label">下单时间</text>
        <text class="value">{{order.orderTime}}</text>
      </view>
      <view class="info-item">
        <text class="label">支付方式</text>
        <text class="value">微信支付</text>
      </view>
      <view class="info-item">
        <text class="label">支付时间</text>
        <text class="value">2024-12-22 22:19:37</text>
      </view>
      <view class="info-item">
        <text class="label">交易单号</text>
        <text class="value">4200002525202412296741622</text>
      </view>
      <view class="info-item">
        <text class="label">配送方式</text>
        <text class="value">30分钟送货到寝</text>
      </view>
      <view class="info-item">
        <text class="label">期望配送时间</text>
        <text class="value">尽快送达</text>
      </view>
      <view class="info-item">
        <text class="label">服务订店</text>
        <text class="value">线上超市</text>
      </view>
      <view class="info-item">
        <text class="label">订单渠道</text>
        <text class="value">微信小程序</text>
      </view>
      <view class="info-item">
        <text class="label">父单编号</text>
        <text class="value">156133071861122</text>
      </view>
      <view class="info-item">
        <text class="label">确认收货时间</text>
        <text class="value">2024-12-29 22:22:15</text>
      </view>
    </view>

    <!-- 复制订单信息按钮 -->
    <view class="copy-order-btn">
      <image src="/static/fuzhi.png" mode="aspectFit"></image>
      <text>复制订单信息</text>
    </view>

    <!-- 客服按钮 -->
    <view class="service-btn">
      <image src="/static/kefu.png" mode="aspectFit"></image>
      <text>客服</text>
    </view>

    <!-- 底部按钮组 -->
    <view class="bottom-btns">
      <button class="btn">更多</button>
      <button class="btn">查看物流</button>
      <button class="btn">查看评价</button>
      <!-- <button class="btn primary">再次购买</button> -->
    </view>
  </view>
</template>


<script src="./index.js"></script>
<style src="./../../common/Navbar/navbar.scss" lang="scss" scoped></style>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
/* #ifdef MP-WEIXIN || APP-PLUS */
::v-deep ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

/* #endif */
</style>
